import React, {useEffect, useState} from 'react';
import {ProCard, ProDescriptions, ProTable} from '@ant-design/pro-components';
import {Skeleton, Space, Tag} from 'antd';
import {API} from "@/services/typings";
import {getServerInfoAPI} from "@/pages/home/service";
import {parseNumber} from "@/utils/NumberUtils";

const SystemMonitoring: React.FC = () => {
  const [serverData, setServerData] = useState<API.IServer>()
  const [loading, setLoading] = useState(false)

  const initData = async () => {
    setLoading(true)
    const {data: serverData} = await getServerInfoAPI()
    setServerData(serverData)
    setLoading(false)
  }

  useEffect(() => {
    initData()
  }, []);

  return (<>
      {
        loading ?
          <Skeleton active paragraph={{rows: 12}}/> :
          <Space direction="vertical" size="middle" style={{width: '100%'}}>
            <ProCard gutter={16} bodyStyle={{padding: 0}} ghost>
              <ProCard colSpan="33%">
                <ProDescriptions
                  title="CPU"
                  column={1}
                  bordered
                  size={'small'}
                  dataSource={serverData?.cpu}
                  labelStyle={{width: '120px', fontWeight: 'bold'}}
                  columns={[
                    {title: '核心数', dataIndex: 'cpuNum'},
                    {
                      title: '用户使用率', dataIndex: 'used',
                      render: (_, row) => <span>{row.used}%</span>
                    },
                    {
                      title: '系统使用率', dataIndex: 'sys',
                      render: (_, row) => <span>{row.sys}%</span>
                    },
                    {
                      title: '当前空闲率',
                      dataIndex: 'free',
                      render: (_, row) => {
                        if (row.free < 20) {
                          return <span style={{color: '#f5222d'}}>{row.free}%</span>
                        } else {
                          return <span>{row.free}%</span>
                        }
                      }
                    },
                  ]}
                />
              </ProCard>
              <ProCard colSpan="33%">
                <ProDescriptions
                  title="内存"
                  labelStyle={{width: '120px', fontWeight: 'bold'}}
                  column={1}
                  bordered
                  size={'small'}
                  dataSource={serverData?.mem}
                  columns={[
                    {title: '总内存', dataIndex: 'total'},
                    {title: '已用内存', dataIndex: 'used'},
                    {title: '剩余内存', dataIndex: 'free'},
                    {
                      title: '使用率',
                      dataIndex: 'usage',
                      render: (_, row) => {
                        const usagePercentage = ((row.used / (row?.total || 1)) * 100).toFixed(2);
                        return (
                          parseNumber(usagePercentage) > 80 ? (
                              <span style={{color: '#f5222d'}}>{usagePercentage}%</span>) :
                            (<span>{usagePercentage}%</span>)
                        );
                      }
                    },
                  ]}
                />
              </ProCard>

              <ProCard colSpan="33%">
                <ProDescriptions
                  title="服务器信息"
                  column={1}
                  bordered
                  size={'small'}
                  labelStyle={{width: '120px', fontWeight: 'bold'}}
                  dataSource={serverData?.sys}
                  columns={[
                    {title: '服务器名称', dataIndex: 'computerName'},
                    {title: '服务器IP', dataIndex: 'computerIp'},
                    {title: '操作系统', dataIndex: 'osName'},
                    {title: '系统架构', dataIndex: 'osArch'},
                  ]}
                />
              </ProCard>
            </ProCard>

            <ProCard>
              <ProTable
                headerTitle="磁盘状态"
                columns={[
                  {title: '盘符路径', dataIndex: 'dirName'},
                  {title: '文件系统', dataIndex: 'sysTypeName'},
                  {title: '盘符描述', dataIndex: 'typeName'},
                  {title: '总大小', dataIndex: 'total'},
                  {title: '可用大小', dataIndex: 'free'},
                  {title: '已用大小', dataIndex: 'used'},
                  {
                    title: '已用百分比',
                    dataIndex: 'percent',
                    render: (_, row) => (
                      <Tag color={row.usage > 80 ? 'red' : row.usage > 60 ? 'orange' : 'green'}>
                        {row.usage}%
                      </Tag>
                    ),
                  },
                ]}
                dataSource={serverData?.sysFiles}
                search={false}
                options={false}
                pagination={false}
                rowKey="key"
              />
            </ProCard>

            <ProCard>
              <ProDescriptions
                title="Java虚拟机信息"
                column={2}
                bordered
                size={'small'}
                labelStyle={{width: '120px', fontWeight: 'bold'}}
                dataSource={serverData?.jvm}
                columns={[
                  {title: 'Java名称', dataIndex: 'name'},
                  {title: 'Java版本', dataIndex: 'version'},
                  {title: '启动时间', dataIndex: 'startTime'},
                  {title: '运行时长', dataIndex: 'runTime'},
                  {title: '安装路径', dataIndex: 'home'},
                  {title: '项目路径', dataIndex: 'projectPath'},
                  {title: '运行参数', dataIndex: 'inputArgs', span: 2},
                ]}
              />
            </ProCard>
          </Space>
      }
    </>
  )
}
export default SystemMonitoring

